import Icon, { PlayCircleOutlined } from '@ant-design/icons';
import { useSetState } from 'ahooks';
import { useEffect } from 'react';

import DirIcon from '@/components/icons/dir';
import { getVideoInfo } from '@/utils';

import styles from './index.less';
interface State {
  fileList: CustomFile[];
}
export interface CustomFile {
  path: string;
  name: string;
}
const Index = () => {
  const defaultState = {
    fileList: []
  };
  const [state, setState] = useSetState<State>(defaultState);
  useEffect(() => {
    window.api.getCacheVideo(localStorage.getItem('videoCacheDir') || '').then((data) => {
      setState({
        fileList: data.filter((item) => {
          return item.name.split('.').at(-1) === 'mp4';
        })
      });
    });
  }, []);
  useEffect(() => {
    state.fileList.forEach((file) => {
      getVideoInfo(file.name, file.path).then((res) => {
        console.log(res);
      });
    });
  }, [state.fileList]);
  return (
    <div className={styles.content}>
      {state.fileList.map((file, index) => {
        return (
          <div key={index} className={styles.videoItem}>
            <video
              src={'http://vjs.zencdn.net/v/oceans.mp4' || file.path}
              controls
              preload="true"
            />
            <div>{file.name}</div>
            <div
              className={styles.icon}
              onClick={() => {
                const path = file.path.split('file://')[1];
                window.api.playerVideo(path);
              }}
            >
              <PlayCircleOutlined style={{ fontSize: 18 }} />
            </div>
            <div
              className={styles.icon}
              onClick={() => {
                const path = file.path.split('file://')[1];
                console.log(path);
                window.api.openSystemSource(path);
              }}
            >
              <Icon component={DirIcon} style={{ fontSize: 18 }} />
            </div>
          </div>
        );
      })}
    </div>
  );
};
export default Index;
